<template>
    <div>
        <tabbar></tabbar>
        <div class="main">
            <div class="card">
                <van-tabs v-model="active">
                <van-tab title="个人资料">
                    <div class="ziliao">
                        <p>用户名：
                            <span>chen</span>
                        </p>
                        <p>真实姓名：
                            <span>丁丁</span>
                        </p>
                        <p>身份证号：
                            <span>511526199503248557</span>
                        </p>
                        <p>电话号码：
                            <span>
                                
                            </span>
                        </p>
                        <p>手机号码：
                            <span>18569874587</span>
                        </p>
                        <p>个人邮箱：
                            <span>chen537723@163.com</span>
                        </p>
                        <p>所在地：
                            <span>四川</span>
                        </p>
                        <div class="change">
                            <p>
                                修改
                            </p>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="我的捐赠">
                    <div class="myjuanzeng">
                        <div>
                            我的捐赠列表
                        </div>
                            <ul>
                                <li v-for="item in personalData" :key="item.id">
                                    <div class="imgBox">
                                        <img :src="item.img" alt="">
                                    </div>
                                    <div class="txtBox">
                                        <p class="name">
                                            项目名称：
                                            {{item.name}}
                                        </p>
                                        <p class="class">
                                            项目类型：
                                            {{item.leibie}}
                                        </p>
                                        <p class="time">
                                            时间：
                                            {{item.time}}
                                        </p>
                                        <span>查看项目</span>
                                    </div>
                                </li>
                            </ul>
                    </div>
                </van-tab>
                <van-tab title="我的项目">
                    <div class="myProject">
                        <p>暂未发布项目</p>
                    </div>
                </van-tab>
                </van-tabs>
            </div>
            <div class="content">
                <div class="backstage" @click="toBackstage">
                    微志益后台
                </div>
            </div>
            
        </div>
        <end></end>
    </div>
</template>
<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
Vue.use(Tab).use(Tabs);
import { getProject } from '@/api/Project'
export default {
    data() {
    return {
      active: 0,
      personalData:[]
    };
  },
  mounted(){
      getProject().then(res=>{
        let tempArr = []
        for(let i = 0 ; i<[Math.ceil(Math.random()*5)];i++){
           tempArr.push(res.data[i])
        }
        this.personalData=tempArr 
        // console.log(this.personalData);
      })
  },
  methods:{
      toBackstage(){
          this.$router.push('http://localhost:8080/backstage')
      }
  }
}
</script>

<style lang="scss" scoped>
    .main{
         margin-top: 20px;
         margin-bottom: 60px;
        .card{
            width: 500px;
            border: 1px solid;
            border: 1px solid #E4E7E9;
            border-radius: 4px;
            padding-bottom: 60px;
           
            padding-right: 500px;
            margin: auto;
            .ziliao{
                margin-top: 20px;
                width: 650px;
                margin-left: 150px;
                padding: 20px 40px;
                border: 1px solid #ccc;
                border-radius: 6px;
                p{
                    color: #333;
                    padding: 8px 0;
                    font-size: 14px;
                    span{
                        margin-left: 5px;
                        color: darkblue;
                    }
                }
                .change{
                    // border: 1px solid;
                    height: 36px;
                    margin-top: 20px;
                    p{
                        color: #333;
                        font-size: 14px;
                        cursor: pointer;
                        float: right;
                        text-decoration: underline;
                    }
                    p:hover{
                        color: red;
                    }
                }
                
            }
            .myjuanzeng{
                margin-top: 20px;
                width: 650px;
                margin-left: 150px;
                padding: 20px 40px;
                border: 1px solid #ccc;
                border-radius: 6px;
                ul{
                    max-height: 380px;
                    overflow-y:scroll; 
                    margin-top: 20px;
                    li{
                        border-bottom: 1px solid #ccc;
                        display: flex;
                        margin-top: 20px;
                        padding-left: 40px;
                        padding-bottom: 10px;
                        .imgBox{
                            width: 80px;
                            height: 100px;
                            background: #ccc;
                            overflow: hidden;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            img{
                                width: 100%;
                                // height: 100%;
                            }
                        }
                        .txtBox{
                            // border: 1px solid;
                            width: 400px;
                            padding-left: 50px;
                            p{
                                padding: 2px 0;
                                font-size: 14px;
                            }
                            span{
                                float: right;
                                cursor: pointer;
                                color: green;
                            }
                            span:hover{
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
            .myProject{
                margin-top: 20px;
                width: 650px;
                height: 200px;
                margin-left: 150px;
                padding: 20px 40px;
                border: 1px solid #ccc;
                border-radius: 6px;
            }
        }
        .content{
            width: 1000px;
            border: 1px solid #fff;
            margin:50px auto;
            .backstage{
                width: 100px;
                background: orange;
                text-align: center;
                padding: 8px 8px;
                border-radius: 5px;
                color: #fff;
                font-weight: 400;
                font-size: 14px;
                float: right;
                cursor: pointer;
                opacity: .7;
            }
            .backstage:hover{
                opacity: 1;
            }
        }
        
    }
</style>